/**
 * Created by bjh on 2017/11/10.
 *
 */
import GM from "g2-mobile";
import PropType from "prop-types";
import { Component } from "react";

//components
import BasicChart from "./basicClass/basicChart.jsx";

const MARGIN_DEFAULT = [20, 20, 20, 20];
class SmartPie extends Component {
    constructor(props, context) {
        super(props);
        this.state = {}
    }
    genLegend() {
        let { chartData } = this.props;
        chartData.sort((i, j) => { return j.b - i.b });
        return <div className="pie-legend">
            <ul>
                {
                    chartData.map((item, i) => {
                        return <li style={{
                            textAlign: "left",
                            display: "flex",
                            alignItems: "center",
                        }}>
                            <span style={{
                                backgroundColor: ["#3296FA", "#4FC8FF", "#32FAFA"][i],
                                width: 22,
                                height: 22,
                                borderRadius: 4,
                                display: "inline-block"
                            }}></span>
                            <span className="name">{item.c}</span>
                            <span className="num">{item.d}人</span>
                        </li>
                    })
                }
            </ul>
        </div>
    }
    render() {
        let {
            chartData,
            margin = MARGIN_DEFAULT,
            width = document.body.clientWidth,
            height = 0.48 * width,
        } = this.props;

        // chartData = chartData.map(val => {
        //     return { a: 1, b: val.value, c: val.key }
        // })
        let tol = 0;
        chartData.map((item) => { tol += item.b })
        chartData = chartData.map((item) => {
            item.b = item.b / tol
            return item
        })

        var data = chartData || [
            { a: '1', b: 0.08, c: '1' },
            { a: '1', b: 0.08, c: '2' },
            { a: '1', b: 0.84, c: '3' }
        ];

        data.sort((i, j) => { return j.b - i.b })
        const configFunc = (chart) => {
            chart.source(data);
            var a = chart.coord('polar', {
                transposed: true,
                inner: 0.58,
            });

            chart.axis(false);
            chart.intervalStack().position('a*b').color('c', ["#3296FA", "#4FC8FF", "#32FAFA"]);
            chart.render();
        };

        return (
            <div style={{ position: "relative" }}>
                {
                    this.props.showLegend ?
                    this.genLegend() : null
                }
                <BasicChart
                    margin={margin}
                    width={width}
                    height={height}
                    chartData={data}
                    configFunc={configFunc}
                    useTooltip={false}
                />
            </div>
        )
    }
}

export default SmartPie

SmartPie.propTypes = {
    chartData: PropType.array,
};

/*
    
*/